<template>
  <div class="w-full h-full">
    <div
      :style="{
        height: '30px',
        background: 'rgba(32, 69, 121, 1)',
      }"
    >
      <ui-list-item :fontstyle="{ color: 'rgba(201, 229, 255, 1)', fontWeight: 500 }" :info="{}" :set="swiperTitle" :title="true" />
    </div>
    <div>
      <swiper
        :style="{ height: '322px' }"
        ref="swiper"
        :loop="true"
        :modules="modules"
        :observer="true"
        :height="300"
        direction="vertical"
        :autoplay="{ autoplay: true, delay: 1 * 1000, disableOnInteraction: false }"
        :slides-per-view="10"
        @swiper="swiperInit"
      >
        <swiper-slide v-for="(item, index) in dataList" :key="index">
          <div class="w-full h-full flex align-center">
            <ui-list-item
              :border="false"
              :bordercolor="'#fff'"
              :borderHeight="'1'"
              :fontstyle="{ color: 'rgba(201, 229, 255, 1)', fontWeight: 500 }"
              :index="index"
              :info="item"
              :set="swiperTitle"
              :title="false"
            />
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import UiListItem from '../../layout/components/uiListItem.vue'
  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
  import { Autoplay, Controller } from 'swiper'
  import 'swiper/swiper-bundle.css'
  import { UiMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'UiBydSwiper',
    components: { UiListItem, Swiper, SwiperSlide },
    data() {
      return {
        swiperTitle: {
          padding: [0, 0, 0, 0],
          numColor: 0,
          listColor: ['rgba(27, 60, 103, 1)'],
          setList: [
            {
              title: '班组',
              props: 'TEAM_GROUP',
              bg: [],
              radius: 0,
              onlyShowBg: true,
              flexNum: 1,
              ruleBg: 'rank',
              ruleNum: 1,
              fontSize: 12,
              color: 'rgba(255, 255, 255, 1)',
              fontWeight: 500,
              bgWidth: 50,
              bgHeight: 50,
              bgStatus: [],
              _id: 'reNameTypeId_kls2tn',
            },
            {
              title: '班别',
              props: 'TEAM_CLASS',
              bg: [],
              radius: 0,
              onlyShowBg: false,
              flexNum: '1',
              ruleBg: 'rank',
              ruleNum: 1,
              fontSize: 12,
              color: 'rgba(0, 255, 186, 1)',
              fontWeight: 500,
              bgWidth: 50,
              bgHeight: 50,
              bgStatus: [],
              _id: 'reNameTypeId_tpjesk',
            },
            {
              title: '岗位',
              props: 'CHECK_POST',
              bg: [],
              radius: 0,
              onlyShowBg: false,
              flexNum: '1',
              ruleBg: 'rank',
              ruleNum: 1,
              fontSize: 12,
              color: 'rgba(255, 234, 0, 1)',
              fontWeight: 500,
              bgWidth: 50,
              bgHeight: 50,
              bgStatus: [],
              _id: 'reNameTypeId_bikw63',
            },
            {
              props: 'USER_NAME',
              bg: [],
              radius: 0,
              onlyShowBg: false,
              flexNum: '1',
              ruleBg: 'rank',
              ruleNum: 1,
              fontSize: 12,
              color: 'rgba(255, 234, 0, 1)',
              fontWeight: 500,
              bgWidth: 50,
              bgHeight: 50,
              bgStatus: [],
              title: '姓名',
              _id: 'reNameTypeId_kd415s',
            },
            {
              props: 'TELEPHONE1',
              bg: [],
              radius: 0,
              onlyShowBg: false,
              flexNum: '2',
              ruleBg: 'rank',
              ruleNum: 1,
              fontSize: 12,
              color: 'rgba(255, 234, 0, 1)',
              fontWeight: 500,
              bgWidth: 50,
              bgHeight: 50,
              bgStatus: [],
              title: '联系电话',
              _id: 'reNameTypeId_grsyn5',
            },
          ],
        },
        modules: [Autoplay, Controller],
        infoComponent: {},
        inter: null,
        dataList: [],
        swiper: null,
      }
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    mixins: [UiMixin, ChartMixin],
    watch: {
      $route: {
        handler(val) {
          if (this.infoComponent.routePath == val.fullPath) {
            this.click()
          }
        },
        deep: true,
      },
      dataList: {
        handler(val) {
          if (val.length >= 10) {
            this.swiper && (this.swiper.params.loop = true)
          } else {
            this.swiper && (this.swiper.params.loop = false)
          }
          console.log(this.swiper)
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent.routePath = this.$route.fullPath
    },
    mounted() {
      this.$nextTick(() => {
        this.getRequestData()
        // if (this.info.extension.requestSet.value.loopRequest) {
        //   this.inter = setInterval(() => {
        //     this.getRequestData()
        //   }, this.info.extension.requestSet.value.loopTime)
        // } else {
        this.inter && (clearInterval(this.inter), (this.inter = null))
        // }
      })
    },
    deactivated() {
      console.warn('退出----------------------')
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      click() {
        this.swiper.slideTo(1, 0)
      },
      swiperInit(swiper) {
        this.swiper = swiper
      },
      getRequestData() {
        const obj = {
          api: '/wms/wms-web',
          method: 'wms.kanban.personnel.query',
          getDataKey: 'wms.kanban.personnel.query',
          loopRequest: false,
          loopTime: 3000,
          nameKey: '',
          valueKey: '',
          busList: [],
          dataObj: {},
          isJson: false,
          data: [
            {
              key: '#LIMIT#',
              value: '1',
            },
            {
              key: '#PAGE_SIZE#',
              value: '999',
            },
          ],
          isSwiper: true,
          resList: [
            {
              name: 'EDITWHO',
              id: '柱状图',
              value: 'QTY',
              _id: 'reNameTypeId_z3cjvf',
              type: 'isChartRequest',
            },
          ],
        }
        this.$request(obj, (res) => {
          console.log('res========', res)
          this.dataList = cloneDeep(res)
        })
      },
    },
  })
</script>
